<template>
  <div class="container">
    <el-dialog
      :visible="showDialog"
      :title="showTitle"
      @close="closeDialog"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="addform" :rules="rules" label-width="80px">
        <el-form-item prop="title" label="文章标题">
          <el-input
            v-model="addform.title"
            placeholder="请输入文章标签"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="文章内容"
          prop="articleBody"
          class="articles_content"
        >
          <quill-editor
            v-model="addform.articleBody"
            :options="editorOption"
            @blur="$refs.form.validateField('articleBody')"
          ></quill-editor>
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input
            v-model="addform.videoURL"
            placeholder="请输入视频地址"
          ></el-input>
        </el-form-item>
        <el-form-item class="button_right_Two">
          <el-button @click.native="closeDialog">取消</el-button>
          <el-button type="primary" @click.native="ClickSubmit">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { add, update } from '@/api/hmmm/articles.js'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    userRow: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    quillEditor
  },
  computed: {
    // 弹框标题判断
    showTitle () {
      return this.addform.id ? '修改文章' : '新增文章'
    }
  },
  data () {
    return {
      // 富文本编辑器配置
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            ['blockquote'], // 引用  代码块
            ['code-block', 'image', 'link'] // 图片、链接
          ]
        },
        placeholder: ''
      },
      addform: {
        title: '', // 标题
        articleBody: '', // 文章内容
        videoURL: '' // 视频地址
      },
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 数据回显的方法
    async getArticleList () {
      this.addform = { ...this.userRow }
    },
    // 点击修改和添加  确定的方法
    ClickSubmit () {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        if (this.addform.id) {
          await update(this.addform)
          this.$message.success('修改文章成功')
        } else {
          await add(this.addform)
          this.$message.success('新增文章成功')
        }
        this.$parent.getlist()
        this.closeDialog()
      })
    },
    // 关闭弹框的方法
    closeDialog () {
      this.$emit('update:showDialog', false)
      // this.showDialog = false
      this.addform = { title: '', articleBody: '', videoURL: '' }
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style scoped lang='scss'>
.articles_content {
  height: 235px;
  .quill-editor {
    height: 235px;
    ::v-deep .ql-toolbar {
      padding: 0;
    }
    ::v-deep .ql-container {
      height: 197px;
    }
  }
}
.button_right_Two {
  display: flex;
  justify-content: flex-end;
}
</style>
